<template>
  <div class="pie-6-wrapper">
    <VueHighChart :options="chartOptions" />
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import VueHighChart from "@/components/VueHighChart.vue";

const props = defineProps({
  data: {
    type: Array,
    default: () => [
      { name: "土建工程", y: 10, color: "#4285AE" },
      { name: "关键指标", y: 8, color: "#379FDE" },
      { name: "信号系统", y: 20, color: "#A4E1FF" },
      { name: "土建工程", y: 12, color: "#4E59AA" },
      { name: "土建工程", y: 11, color: "#3EB6FF" },
      { name: "土建工程", y: 6, color: "#83D74B" },
      { name: "土建工程", y: 9, color: "#0095FF" },
      { name: "关键指标", y: 10, color: "#76CAC7" },
      { name: "关键指标", y: 6, color: "#7FE6EA" },
      { name: "关键指标", y: 21, color: "#2B76A4" },
      { name: "关键指标", y: 14, color: "#6FA2C1" },
      { name: "信号系统", y: 49, color: "#4285AE" },
      { name: "信号系统", y: 51, color: "#379FDE" },
    ],
  },
});

// Highcharts配置选项
const chartOptions = computed(() => ({
  chart: {
    type: "pie",
    options3d: {
      enabled: true,
      alpha: 66, // 倾斜角度
    },
    backgroundColor: "transparent", // 背景透明
    animation: false, // 禁用动画
  },
  credits: {
    enabled: false, // 关闭 Highcharts 版权水印
  },
  legend: {
    enabled: false, // 禁用图例
  },
  title: {
    text: "",
  },
  subtitle: {
    text: "",
  },
  plotOptions: {
    pie: {
      innerSize: 0, // 中心圆圈大小
      depth: 25, // 3D饼图的厚度
      dataLabels: {
        enabled: false, // 禁用数据标签
      },
    },
  },
  series: [
    {
      name: "",
      data: props.data.map((item) => ({
        name: item.name,
        y: item.y,
        color: item.color || "#000", // 使用动态的颜色
      })),
    },
  ],
}));
</script>

<style lang="scss" scoped>
.pie-6-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
